<template>
  <div class="container">
    <Row class="btn-action">
      <Col span="8" v-if="companyCode === 'LM'">
        <Button type="primary" class="mp10" href="fcAllDataStr" @click="exportData()"><Icon type="ios-download-outline"></Icon>导出</Button>
        <Button type="primary" class="mp10" href="fcAllDataStr" @click="selectlist2()" style="margin-left:5px"><Icon type="md-search" /></Icon>刷新</Button>
      </Col>
    </Row>
    <Table :loading="countData.loading" border  :columns="columns" :data="DataList" size="small" ref="table">
    </Table>
  </div>
</template>

<script>
import { findTable1newList, findRowNameValueList } from '@/api/yi-qing-fang-kong'
import { date2str } from '@/api/eventlist'
export default {
  name: 'superior-list',
  data () {
    return {
      DataList: [],
      countData: { loading: false, fcnum: 0, ytbnum: 0, zcnum: 0 },
      columns: [
        // { title: '区县', key: 'city', width: 200, align: 'center' },
        // { title: '境外入沈居家隔离人员', key: 'num1', width: 100, align: 'center' },
        // { title: '密接居家隔离人员', key: 'num3', width: 100, align: 'center' },
        // { title: '社区健康监测人员', key: 'num4', width: 100, align: 'center' },
        // { title: '暴露人群居家隔离群人员', key: 'num34', width: 100, align: 'center' },
        // { title: '云南省瑞丽市', key: 'num20', width: 100, align: 'center' },
        // { title: '云南省德宏州', key: 'num35', width: 100, align: 'center' },
        // { title: '广东省广州市', key: 'num70', width: 100, align: 'center' },
        // { title: '福建省厦门市', key: 'num71', width: 100, align: 'center' },
        // { title: '福建省莆田市', key: 'num73', width: 100, align: 'center' },
        // { title: '福建省泉州市', key: 'num74', width: 100, align: 'center' },
        // { title: '福建省漳州市', key: 'num75', width: 100, align: 'center' },
        // { title: '黑龙江省哈尔滨市', key: 'num76', width: 100, align: 'center' }
      ]
    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  watch: {
  },
  methods: {
    selectlist2 () {
      this.$Notice.info({
        title: '查询统计中，请耐心等候~~',
        desc: ''
      })
      this.countData.loading = true
      findTable1newList().then(res => {
        if (res.data.errcode === 0) {
          this.DataList = res.data.data
          this.countData.loading = false
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: res.data.errmsg
          })
        }
      })
      setTimeout(() => {
        this.selectrowtitlelist()
      }, 1500)
    },
    selectrowtitlelist () {
      let that = this
      this.countData.loading = true
      findRowNameValueList().then(res => {
        if (res.data.errcode === 0) {
          let newrow = []
          res.data.data.forEach((item, index) => {
            let onerow = { title: item.row_name, key: item.row_value, width: item.width, align: 'center' }
            if (item.row_value === 'city') {
              onerow = { title: item.row_name, key: item.row_value, width: item.width, align: 'center', fixed: 'left' }
              newrow.push(onerow)
            } else if (that.DataList[13][item.row_value] > 0) {
              console.log(onerow, '00000=======')
              newrow.push(onerow)
            }
            // console.log(this.DataList[13][item.row_value], '======' + item.row_value)
            // if (this.DataList[13][item.row_value] > 0) {
            //   newrow.push(onerow)
            // }
          })
          that.columns = newrow
          this.countData.loading = false
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    exportData () {
      let today = new Date()
      this.$refs.table.exportCsv({
        filename: '社区管控重点人群统计表' + date2str(today)
      })
    }
  },
  mounted () {
    this.selectlist2()
  }
}
</script>

<style scoped>
  .page_style {
    margin: 20px 5px;
  }

  .input-frame {
    width: 120px;
    margin-right: 10px;
  }

  .house-list > .group {
    background: white;
    padding: 10px;
    margin-top: 10px;
  }

  .house-list > .group > .item {
    border-bottom: 1px solid #f5f5f5;
    padding: 10px 0;
  }

  .house-list > .group > .item .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }

  .house-list > .group > .item .title {
    font-size: 14px;
    color: #333333;
  }

  .house-list > .group > .item .address {
    font-size: 12px;
    color: gray;
    display: flex;
    align-items: center;
  }

  .house-list > .group > .item .detail {
    font-size: 12px;
    color: dodgerblue;
  }

  .opt-area-02 {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid #abdcff;
    background-color: #f0faff;
    padding: 8px 16px 8px 16px;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .opt-area-02 .right-con {
    width: 100%;
    margin-top: 5px;
    display: flex;
  }

  .opt-area-02 .left-con {
    font-size: 14px;
    width: 100%;
  }

  .opt-area-02 .left-con span {
    font-weight: bold;
  }

  .opt-area-02 .right-con input {
    width: 150px;
    margin-right: 10px;
  }

  .opt-area-02 .right-con .input-frame {
    width: 200px;
    margin-right: 10px;
  }

  .table-action-btn {
    margin-right: 3px;
  }

  .container >>> .ivu-btn-small {
    height: 24px;
    padding: 0 5px;
    font-size: 12px;
    border-radius: 3px;
  }

  .btn-action {
    margin-bottom: 10px;
  }

  .mp10 {
    margin-right: 10px;
  }
  .title-style {
    color: red;
  }
  .mb20 {
    margin-bottom: 20px;
  }
  .ivu-table-row {
    height: 57px;
  }
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
  }
  .demo-spin-col{
    height: 100px;
    position: relative;
    /*border: 1px solid #eee;*/
  }
</style>
